<template>
  <div class="user-container">
    <!--会员登录-->
    <van-row class="user-login" @click="openLogin">
      <van-col span="6">
        <van-image :src="avatar"></van-image>
      </van-col>
      <van-col class="tips" span="10">{{nickname}}</van-col>
      <van-col class="more" span="8">
        <van-icon name="arrow" />
      </van-col>
    </van-row>
    <!--会员宫格-->
    <van-grid class="user-list" :column-num="3" square>
      <van-grid-item>
        <i slot="icon" class="iconfont icon-dingdanjihe"></i>
        <span slot="text" class="text">我的订单</span>
      </van-grid-item>
      <van-grid-item>
        <i slot="icon" class="iconfont icon-youhuiquan"></i>
        <span slot="text" class="text">优惠券</span>
      </van-grid-item>
      <van-grid-item>
        <i slot="icon" class="iconfont icon-lipin"></i>
        <span slot="text" class="text">礼品卡</span>
      </van-grid-item>
      <van-grid-item>
        <i slot="icon" class="iconfont icon-shoucang"></i>
        <span slot="text" class="text">我的收藏</span>
      </van-grid-item>
      <van-grid-item>
        <i slot="icon" class="iconfont icon-zuji"></i>
        <span slot="text" class="text">我的足迹</span>
      </van-grid-item>
      <van-grid-item>
        <i slot="icon" class="iconfont icon-huiyuan"></i>
        <span slot="text" class="text">会员福利</span>
      </van-grid-item>
      <van-grid-item>
        <i slot="icon" class="iconfont icon-shouhuodizhi"></i>
        <span slot="text" class="text">地址管理</span>
      </van-grid-item>
      <van-grid-item>
        <i slot="icon" class="iconfont icon-anquanzhongxin"></i>
        <span slot="text" class="text">账号安全</span>
      </van-grid-item>
      <van-grid-item>
        <i slot="icon" class="iconfont icon-kefu"></i>
        <span slot="text" class="text">联系客服</span>
      </van-grid-item>
      <van-grid-item>
        <i slot="icon" class="iconfont icon-bangzhu"></i>
        <span slot="text" class="text">帮助中心</span>
      </van-grid-item>
      <van-grid-item>
        <i slot="icon" class="iconfont icon-yijianfankui"></i>
        <span slot="text" class="text">意见反馈</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  name: 'Uesr',
  data () {
    return {
      avatar: '', // 头像
      nickname: '用户登录' // 用户名
    }
  },
  created () {
    // 组件刚创建的时候需要判断用户有没有登录，获取localStorage有没有token值
    // 如果有token,就表示已经登录，就应该填上用户信息
    const token = localStorage.getItem('token')
    if (token) {
      // 获取本地存储userInfo
      const userInfo = JSON.parse(localStorage.getItem('userInfo'))
      // 模拟头像
      this.avatar = require('@/assets/avatar.png')
      // this.avatar = userInfo.avatar
      // 模拟用户名
      // this.nickname = '洋聪微傳'
      this.nickname = userInfo.username
    }
    // 组件创建，存储模拟token
    this.login()
  },
  methods: {
    login () {
      // 模拟假的token和用户信息
      localStorage.setItem('token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxMTQ5OSwiaWF0IjoxNjM4Mjc3NzM0fQ.H9WYp2_DpafR3o8l8UT2bb2WSAiHsPI5rcwOEFJGnNQ')
      // 模拟假的用户信息，定义一个对象，将对象转为字符串
      const data = { id: '1273', username: '洋聪微傳', avatar: '../../assets/avatar.png' }
      const Object = JSON.stringify(data) // 转字符串
      localStorage.setItem('userInfo', Object) // 存储对象
    },
    // 打开登录
    openLogin () {
      // 如果有token,就表示已经登录，就应该填上用户信息
      const token = localStorage.getItem('token')
      // 判断用户是否登录，如果登录直接return，没有登录就跳转
      if (token) {
        // 已经登录，直接返回，不用操作任何事情
        return
      }
      // 没有登录就跳转登录页面
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.user-login{
  padding: 25px 20px;
  background-color: #b75d12;
  display: flex;
  align-items: center;
  .van-image{
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #f1f1f1;
    overflow: hidden;
  }
  .tips{
    font-size: 22px;
    color: #fff;
  }
  .more{
    text-align: right;
    color: #fff;
  }
}
.user-list{
  .iconfont{
    font-size: 30px;
    color: #282828;
  }
  .text{
    font-size: 15px;
    color: #282828;
    margin-top: 10px;
  }
}
</style>
